<template>
  <div>

    <el-card class="box-card">
      <div class="skuCount">
        <div class="title"><i class="el-icon-s-promotion"></i>按BU统计需求类型</div>
        <bu-list-nav :buList="buList" @clickBu="clickBu" :buIndex=buIndex ></bu-list-nav>
        <div class="total">
          <ve-histogram
            :data="buData"
            :settings="buSettings"
            :height="height"
            :width="width"
            :extend="extend"

          ></ve-histogram>
        </div>

      </div>
    </el-card>


    <el-card class="box-card">
      <div class="skuCount">
        <div class="title"><i class="el-icon-s-promotion"></i>按月统计需求类型</div>
        <div class="total">
          <ve-histogram
            :data="chartData"
            :settings="chartSettings"
            :height="height"
            :width="width"
            :extend="extend"
          ></ve-histogram>
        </div>
      </div>
    </el-card>



    <el-card class="box-card">
      <div class="skuCount">
        <div class="title"><i class="el-icon-s-promotion"></i>按月统计设计师需求个数</div>
        <div class="total">
          <ve-histogram
            :data="designerData"
            :settings="designerSettings"
            :height="height"
            :width="width"
            :extend="extend"
          ></ve-histogram>
        </div>
      </div>
    </el-card>



   </div>
</template>
<script>
  const ERR_OK = 200;
import {
  demandTypeSumByMonth,
  designerDemandSumByMonth,
  demandTypeSumByBusinessUnitId,
  getDesignerList,
} from "@/api/visualDesign";

  import {
    BU,
  } from "@/api/common";

import VeLine from "v-charts/lib/line.common";
import veHistogram from "v-charts/lib/histogram.common";
import amap from "v-charts/lib/amap.common";
import buListNav from "@/views/visualDesign/buListNav"
export default {

  components: {
    veHistogram,
    buListNav
  },
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
  },
  data() {

    return {
      extend: {
        series: {
          barMaxWidth: 20,
          label: {
            show: true,
            position: "top",
          },
        },
      },
      chartSettings: {
        scale: true,
        yAxisName: ["", ""],
        stack: {
        //   产品销售额度: [
        //     "new_create",
        //     "modify",
        //     "documentation",
        //     "video",
        //     "other",
        //   ],
        },
        labelMap: {
          month: "日期",
          new_create: "新增",
          modify: "修改",
          documentation: "文档",
          video: "视频",
          other: "其他",
        },
      },

      chartData: {
        columns: [
          "month",
          "new_create",
          "modify",
          "documentation",
          "video",
          "other",
        ],
        rows: [],
      },


      designerSettings: {
        scale: true,
        yAxisName: ["", ""],
        stack: {
          //   产品销售额度: [
          //     "new_create",
          //     "modify",
          //     "documentation",
          //     "video",
          //     "other",
          //   ],
        },
        labelMap: {
          month: "月份",

        },
      },

      designerData: {
        columns: [
          "month",
        ],
        rows: [],
      },

      designerList:[],


      buSettings: {
        scale: true,
        yAxisName: ["", ""],
        stack: {
          //   产品销售额度: [
          //     "new_create",
          //     "modify",
          //     "documentation",
          //     "video",
          //     "other",
          //   ],
        },
        labelMap: {
          month: "日期",
          new_create: "新增",
          modify: "修改",
          documentation: "文档",
          video: "视频",
          other: "其他",
        },
      },

      buData: {
        columns: [
          "month",
          "new_create",
          "modify",
          "documentation",
          "video",
          "other",
        ],
        rows: [],
      },

      buList: [
        /*
        *  {
          businessUnit: "Syncwire",
          businessUnitId: 1
        },
        * */
      ],
      buIndex: 1,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {

      //获取BU列表
      BU().then((res) => {
        this.buList = res.data.data.BusinessUnit;
      });

      //按月份统计需求类型
      demandTypeSumByMonth().then((res) => {
        this.chartData.rows = res.data.data;
      });
      //按月份统计设计师需求个数
      designerDemandSumByMonth().then((res) => {
        this.designerData.rows = res.data.data;
      });

      //按BU统计需求类型
      demandTypeSumByBusinessUnitId({businessUnitId : this.buIndex}).then((res) => {
        console.log("buData ")
        this.buData.rows = res.data.data;
        console.log(this.buData.rows)
      });

      //获取设计师列表
      getDesignerList().then((res) => {

        if (res.data.code === ERR_OK) {
          this.designerList = res.data.data;


          this.designerSettings.labelMap = []
          for(var obj of this.designerList){

            var username = obj.chineseName;
            this.designerData.columns.push(username);
            this.designerSettings.labelMap.push({ username  : username});

          }
        }
      });

    },

    demandTypeSumByBusinessUnitId(businessUnitId){
      //按BU统计需求类型
      demandTypeSumByBusinessUnitId({businessUnitId : businessUnitId}).then((res) => {
        this.buData.rows = res.data.data;
      });
    },

    clickBu(item) {
      this.loading = true;
      this.buIndex = item.businessUnitId
      this.demandTypeSumByBusinessUnitId(item.businessUnitId);
    },
  },
};
</script>
<style lang="scss" scoped>
.total{
    margin-top: 20px;
    margin-left: 10px;
}
.skuCount {
  position: relative;
  margin-top: 10px;
  padding: 10px;

.title{
  position: absolute;
  top: 5px;
  font-size: 14px;
i{
  color: #409eff;
}
}
}
</style>
